<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>async编程</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery.min.js"></script>
    <script type="module">
        function displayName(json) {
            try {
                console.log(json.Name);
            }
            catch (e) {
                console.log("Exception: " + e.message);
            }
        }

        function displayProfession(json) {
            try {
                console.log(json.Profession);
            }
            catch (e) {
                console.log("Exception: " + e.message);
            }
        }

        function displayAge(json) {
            try {
                console.log(json.Age);
            }
            catch (e) {
                console.log("Exception: " + e.message);
            }
        }

        function displayData(data) {
            try {
                var json = JSON.parse(data);

                displayName(json);
                displayProfession(json);
                displayAge(json);
            }
            catch (e) {
                console.log("Exception: " + e.message);
            }
        }

        var request = new XMLHttpRequest();
        var url = "data.json";

        request.open("GET", url);
        request.addEventListener("load", function () {
            if (request.status === 200) {
                displayData(request.responseText);
            }
            else {
                console.log("Server Error: " + request.status);
            }
        }, false);

        request.addEventListener("error", function () {
            console.log("Cannot Make AJAX Request");
        }, false);

        //事件模式，异步执行
        request.send();
    </script>
</head>
<body>

</body>
</html>